<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<style>
			.menu {
				list-style: none;
				padding: 0;
			}
			
			.menu li {
				text-align: center;
				float: left;
				width: 25%;
				height: 100px;
				padding: 10px;
			}
			
			.menu li a {}
			
			.menu li a img {
				width: 80%;
				height: 80%;
				text-align: center;
			}
			
			.menu li a span {
				font-size: 12px;
				color: #000000;
			}
			
			.mui-table-view-chevron .mui-table-view-cell {
				padding-right: 15px;
			}
			
			ul.item {
				margin-top: 20px;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">个人中心</h1>
		</header>
		<div id="app" class="mui-content">
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media">
					<!--<a class="mui-navigate-right" href="#account">-->
					<a class="mui-navigate" href="#account" @tap="toLogin">
						<img class="mui-media-object mui-pull-left head-img" id="head-img" src="../images/logo.png">
						<div class="mui-media-body">
							<span v-html="load?(user.nickname):'未登录'"></span>
							<p class='mui-ellipsis'><span>到期时间:</span><span v-html="load?(formatDate(user.memberExpire)):''"></span></p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron item" v-show="load">
				<li class="mui-table-view-cell">
					<!--<a href="#notifications" v-show="load && !user.isMember" class="mui-navigate-right"><i style="color: #007aff;" class="mui-icon-extra mui-icon-extra-heart-filled"></i>&nbsp;&nbsp;&nbsp;成为会员</a>-->
					<a url="activation_code.html" @tap="go('activation_code.html')" class="mui-navigate-right"><i style="color: #007aff;" class="mui-icon-extra mui-icon-extra-card"></i>&nbsp;&nbsp;&nbsp;捐助作者</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#notifications" @tap="go('watch_history.html')" class="mui-navigate-right"><i style="color: #007aff;" class="mui-icon mui-icon-videocam"></i>&nbsp;&nbsp;&nbsp;观看记录</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron item">
				<li class="mui-table-view-cell">
					<a @tap="checkUp" href="#privacy" class="mui-navigate-right"><i style="color: #007aff;" class="mui-icon mui-icon-reload"></i>&nbsp;&nbsp;&nbsp;检查更新</a>
				</li>
				<li class="mui-table-view-cell">
					<a @tap="unopened" href="#general" class="mui-navigate-right"><i style="color: #007aff;" class="mui-icon mui-icon-info"></i>&nbsp;&nbsp;&nbsp;关于我们</a>
				</li>
				<li class="mui-table-view-cell">
					<a @tap="unopened" href="#general" class="mui-navigate-right"><i style="color: #007aff;" class="mui-icon mui-icon-help"></i>&nbsp;&nbsp;&nbsp;常见问题</a>
				</li>
			</ul>

			<ul class="mui-table-view mui-table-view-chevron item" v-show="load">
				<li class="mui-table-view-cell">
					<a href="#privacy" @tap="logout" class="mui-navigate-right"><i style="color: red;" class="mui-icon mui-icon-close"></i>&nbsp;&nbsp;&nbsp;退出登陆</a>
				</li>
			</ul>
			<!--<ul id="menu-box" class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media">
					<ul class="menu">
						<li><a><img src="../images/logo.png" /><span>vip激活</span></a></li>
						<li><a><img src="../images/logo.png" /><span>观看记录</span></a></li>
						<li><a><img src="../images/logo.png" /><span></span></a></li>
						<li><a><img src="../images/logo.png" /><span>vip激活</span></a></li>
					</ul>
				</li>
			</ul>-->
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/jQuery.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				window.vm = new Vue({
					el: "#app",
					data: {
						load: false,
						user: undefined
					},
					methods: {
						go: function(url) {
							plus.webview.open(url, url, {}, "slide-in-right", 200)
						},
						checkUp: function() {
							checkVersion();
						},
						formatDate: function(time) {
							if(new Date().getTime() > time) {
								return "已过期";
							}
							return new Date(time).format("yyyy-MM-dd hh:mm:ss");
						},
						initUser: function() {
							this.user = getLoginUser();
							if(this.user) {
								this.load = true;
							} else {
								this.load = false;
							}
						},
						updateUser: function() {
							var that = this;
							postServer({
								url: requestUrl("/app/appUser/getInfo"),
								data: JSON.stringify({
									id: getLoginUser().id
								}),
								success: function(result) {
									if(result.success) {
										setLoginUser(result.result);
										that.initUser();
									} else {
										mui.toast(result.msg);
									}
								}
							})
						},
						toLogin: function() {
							if(!this.load) {
								var wait = plus.nativeUI.showWaiting()
								plus.webview.create('login.html', 'login.html', {}, {});
								setTimeout(function() {
									wait.close();
								}, 150)
							}
						},
						logout: function() {
							var that = this;
							mui.confirm('注销账号?', '', ['否', '是'], function(e) {
								if(e.index == 1) {
									logout();
									that.initUser();
									that.toLogin();
								}
							})
						},
						unopened: function() {
							mui.toast("尽请期待!")
						}
					}
				});
				vm.initUser();
			})
		</script>
	</body>

</html>